<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="qframe/qframe.css">
        <style type="text/css">
            html{
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
                }
            #tools{
                
            }
            #ctrl{
                height:3vw;
                width:4vw;
                padding: 0;
                }
            #ctrl.a{background-color: coral;}
            #ctrl.b{background-color: rgb(199, 62, 12);}
            td{
                height:1.5vw;
                width:2vw;
                padding: 0;
                background-color: burlywood;
                text-align: center;
            }
            td.n{
               background-color: silver; 
            }
            td.o{
                background-color: wheat;
            }
            td.w{
                background-color: coral;
            }
            #game{
                float: left;
            }
            #set{
                float: left;
            }
        </style>
    </head>
    <body onkeydown="if(event.keyCode == 17 && !iscontrol){buttonctrl()}"
            onkeyup="if(event.keyCode == 17 && iscontrol){buttonctrl()}">
        <h3>扫雷</h3>
        <div class="game">
            <table id="main">
            
            </table>
            <div id="tools_ctrl">
                <div>标记</div>
                <div id="ctrl" class="a" onclick="if(event.ctrlkey){return;}buttonctrl()"></div>
            </div>
        </div>
        <div id="set">
            <input type="text">
        </div>
    </body>
    <script src="qframe/qframe.js"></script>
    <script>//注：每个方格的坐标不是从零开始，因为要算上外围！
        var iscontrol = false;//按下ctrl
        var the = document.getElementById("main");
        var game = true;
        var width = 22;
        var height = 22;
        var swen = 10;
        var leftt = (width-1)*(height-1)-swen;
        var god = [];
        function starter(){//每次游戏的调用入口
            game = true;
            width = 22;
            height = 22;
            swen = 10;
            leftt = (width-1)*(height-1)-swen;
            god = [];
            let txt = "<tr>";
            for(var n = 0;n<width+1;n++){//数组载入
                god[n] = new Array(height+1);
                god[n].fill(0);
            }
            for(var n = 0;n<swen;n++){//塞雷
                god[Math.round(1+Math.random()*(width-2))][Math.round(1+Math.random()*(height-2))] = 1;
            }
            console.log(god);
            for(var n = 0;n<height;n++){//上方的外围
                txt+="<td>"+n+"</td>";
            }
            for(var nw = 1;nw<width;nw++){//开始插入..
                txt+="<tr><td>"+nw+"</td>";
                for(var nh = 1;nh<height;nh++){
                    txt+=
                    "<td id=\""+nw+"and"+nh+"\" class=\"n\" "+
                    "onclick=\"if(event.ctrlKey || iscontrol){ ctrl("+nw+","+nh+");return;}setting("+nw+","+nh+")\"></td>";
                }
                txt+="</tr>"
            }
            the.innerHTML = txt;
            
        }
        function setting(w,h){//打开
            var tq = document.getElementById(w+"and"+h);
            if(w<1 || w>width-1 || h<1 || h>height-1 ||tq.className =="o" ||tq.className =="w"){
                return 0;
            }
            if(god[w][h] == 1){
                game=false;console.log("hi")
                qframe.start("你失败啦！下次走运","再来","取消");
                qframe.yes = function(){
                    starter();
                }
                return;
            }
            document.getElementById(w+"and"+h).className = "o";
            if(--leftt<=0){
                game=false;
                console.log("yes!");
                qframe.start("你胜利了！","再来","取消");
                qframe.yes = function(){
                    starter();
                }
                return;
            }
            var nu = 
            god[w-1][h-1]+
            god[w-1][h]+
            god[w-1][h+1]+
            god[w][h-1]+
            god[w][h+1]+
            god[w+1][h-1]+
            god[w+1][h]+
            god[w+1][h+1];//周围雷
            if(nu != 0){//有雷显示
                document.getElementById(w+"and"+h).innerHTML = nu;
            }
        }
        function deler(){//循环
            if(!game) return;
            for(var nw = 1;nw<width;nw++){//这里进行空白扩大
                for(var nh = 1;nh<height;nh++){
                    var doc = document.getElementById(nw+"and"+nh);
                    if(doc.className == "o" && doc.innerHTML == ""){
                        setting(nw-1,nh-1);
                        setting(nw-1,nh);
                        setting(nw-1,nh+1);
                        setting(nw,nh-1);
                        setting(nw,nh+1);
                        setting(nw+1,nh-1);
                        setting(nw+1,nh);
                        setting(nw+1,nh+1);
                        }
                    }
                }
                
        }
        function ctrl(w,h){
            var doc =document.getElementById(w+"and"+h);
            if(doc.className == "n"){
                doc.className = "w";
                doc.innerHTML = "!";
                return;
            }
            if(doc.className == "w"){
                doc.className = "n";
                doc.innerHTML = "";
                return;
            }
        }
        function buttonctrl(){//标记切换
            if(iscontrol){
                iscontrol = false;
                document.getElementById("ctrl").className="a";
                return;
            }
            iscontrol = true;
            document.getElementById("ctrl").className="b";
        }
        starter();
        setInterval("deler()",10)
            //setTimeout("location.reload()",1000)
    </script>
</html>